<template>
    <div class="my-header">
        <div>
            <span>ToDoList</span>
            <input type="text" placeholder="添加toDo" @keydown.enter="addTask">
        </div>
    </div>
</template>
<script>
import { useStore } from 'vuex'
export default {
    setup() { 
        // setup他是vue3中使用的所有组合api的入口函数 他执行在生命周期beforeCreate之前 所以他的内部不能使用this
        // console.log(this);
        // 引入vuex的数据和方法
        // 在vue中涉及的一个核心知识就是数据双向绑定的原理 vue2使用的数据劫持方法是 Object.defineProperty() vue3中使用的事proxy

        // proxy其实可以看作是对Object.defineProperty()方法的完善 
        const store = useStore()
        // console.log(store);
        function addTask(e) { // 这里将数据添加进入vuex中
            // console.log(e);
            store.commit('addTask', e.target.value)
            e.target.value = ''
        }


        return { // 无论是页面中要使用的数据还是函数都需要return出来才能使用
            addTask
        }
    }
}
</script>
<style lang="scss" scoped>
    .my-header {
        width: 100%;
        height: 50px;
        background: #333;
        color: #fff;
        font-weight: bold;
        div {
            width: 800px;
            margin: 0 auto;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                font-size: 26px;
            }

            input {
                border: 0;
                outline: none;
                width: 400px;
                height: 26px;
                border-radius: 6px;
                padding-left: 10px;
            }
        }
    }
</style>